<template>
  <div class="bg">
    <van-icon name="arrow-left" color="white" size="30px" @click="goback()"/>
    <div class="video-box">
      <video
        :src="url"
        autoplay="autoplay"
        controls="controls"
        type="video/mp4"
      ></video>
    </div>
    <div class="title1">{{ name }}</div>
    <div class="name1">{{ artistname }}</div>
  </div>
</template>
<script>
import Vue from "vue";
import { Icon } from "vant";
Vue.use(Icon);
export default {
  data() {
    return {
      artistname: null,
      name: null,
      url: null,
    };
  },
  beforeDestroy() {
    this.$bus.$emit("hideMenu", true);
  },
  methods: {
    goback(){
      this.$router.go(-1);
    }
  },
  async mounted() {
    this.$bus.$emit("hideMenu", false);
    var data = this.$route.query;
    this.artistname = data.artistName;
    this.name = data.uname;
    let res = await this.$api.getVideo(data.id);
    this.url = res.data.url;
    console.log(this.url);
  },
};
</script>

<style scoped lang="scss">
.bg {
  width: 100%;
  height: 667px;
  background: rgba(0, 0, 0, 0.6);
}
.video-box {
  position: absolute;
  top: calc(50% - 150px);
  width: 100%;
  height: 200px;
}
.video-box video {
  width: 100%;
  height: 100%;
  background: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1713705560,2016996885&fm=26&gp=0.jpg)
    100% 100%;
}
/deep/ .van-icon {
  position: absolute;
  left: 5px;
  top: 5px;
}
.title1 {
  position: absolute;
  left:5%;
  top: 60%;
  font-size: 20px;
  color: #fff;
}
.name1{
  position: absolute;
  font-size: 20px;
  color: #fff;
  left: 5%;
  top: 64%;
}
</style>
